<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逗游吧后台框架</title>
    <% include ../include/docs-link %>
</head>
<body class="wrapper-body">
<% include ../include/docs-header %>
<div class="wrapper-container">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-2">
                <% include ../include/docs-nav %>
            </div>
            <div class="col-10">
                <div class="wrapper-content">
                    <article class="wrapper-article">
                        <h1>Button 按钮</h1>
                        <div class="anchor">
                            <h2 id="概述">概述</h2>
                            <a href="#概述">#</a>
                        </div>
                        <p>在Bootstrap的基础上扩展了常用的操作按钮。</p>
                        <div class="anchor">
                            <h2 id="基础用法">基础用法</h2>
                            <a href="#基础用法">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <a href="javascript:;" class="btn btn-default">Link</a>
                                <button type="button" class="btn btn-default">Button</button>
                                <input type="button" class="btn btn-default" value="Input">
                                <input class="btn btn-default" type="submit" value="Submit">
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;a href="javascript:;" class="btn btn-default"&gt;Link&lt;/a&gt;
    &lt;button type="button" class="btn btn-default"&gt;Button&lt;/button&gt;
    &lt;input type="button" class="btn btn-default" value="Input"&gt;
    &lt;input class="btn btn-default" type="submit" value="Submit"&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="有颜色的按钮">有颜色的按钮</h2>
                            <a href="#有颜色的按钮">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <div>
                                    <button type="button" class="btn btn-default">主要样式</button>
                                    <button type="button" class="btn btn-primary">主要样式</button>
                                    <button type="button" class="btn btn-info">一般信息</button>
                                    <button type="button" class="btn btn-success">成功按钮</button>
                                    <button type="button" class="btn btn-warning">警告按钮</button>
                                    <button type="button" class="btn btn-danger">错误按钮</button>
                                </div>
                                <br />
                                <div>
                                    <button type="button" class="btn btn-default btn-ghost">主要样式</button>
                                    <button type="button" class="btn btn-primary btn-ghost">主要样式</button>
                                    <button type="button" class="btn btn-info btn-ghost">一般信息</button>
                                    <button type="button" class="btn btn-success btn-ghost">成功按钮</button>
                                    <button type="button" class="btn btn-warning btn-ghost">警告按钮</button>
                                    <button type="button" class="btn btn-danger btn-ghost">错误按钮</button>
                                </div>
                                <br />
                                <div>
                                    <button type="button" class="btn btn-default btn-dashed">主要样式</button>
                                    <button type="button" class="btn btn-primary btn-dashed">主要样式</button>
                                    <button type="button" class="btn btn-info btn-dashed">一般信息</button>
                                    <button type="button" class="btn btn-success btn-dashed">成功按钮</button>
                                    <button type="button" class="btn btn-warning btn-dashed">警告按钮</button>
                                    <button type="button" class="btn btn-danger btn-dashed">错误按钮</button>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;div&gt;
        &lt;button type="button" class="btn btn-default"&gt;主要样式&lt;/button&gt;
        &lt;button type="button" class="btn btn-primary"&gt;主要样式&lt;/button&gt;
        &lt;button type="button" class="btn btn-info"&gt;一般信息&lt;/button&gt;
        &lt;button type="button" class="btn btn-success"&gt;成功按钮&lt;/button&gt;
        &lt;button type="button" class="btn btn-warning"&gt;警告按钮&lt;/button&gt;
        &lt;button type="button" class="btn btn-danger"&gt;错误按钮&lt;/button&gt;
    &lt;/div&gt;
    &lt;br /&gt;
    &lt;div&gt;
        &lt;button type="button" class="btn btn-default btn-ghost"&gt;主要样式&lt;/button&gt;
        &lt;button type="button" class="btn btn-primary btn-ghost"&gt;主要样式&lt;/button&gt;
        &lt;button type="button" class="btn btn-info btn-ghost"&gt;一般信息&lt;/button&gt;
        &lt;button type="button" class="btn btn-success btn-ghost"&gt;成功按钮&lt;/button&gt;
        &lt;button type="button" class="btn btn-warning btn-ghost"&gt;警告按钮&lt;/button&gt;
        &lt;button type="button" class="btn btn-danger btn-ghost"&gt;错误按钮&lt;/button&gt;
    &lt;/div&gt;
    &lt;br /&gt;
    &lt;div&gt;
        &lt;button type="button" class="btn btn-default btn-dashed"&gt;主要样式&lt;/button&gt;
        &lt;button type="button" class="btn btn-primary btn-dashed"&gt;主要样式&lt;/button&gt;
        &lt;button type="button" class="btn btn-info btn-dashed"&gt;一般信息&lt;/button&gt;
        &lt;button type="button" class="btn btn-success btn-dashed"&gt;成功按钮&lt;/button&gt;
        &lt;button type="button" class="btn btn-warning btn-dashed"&gt;警告按钮&lt;/button&gt;
        &lt;button type="button" class="btn btn-danger btn-dashed"&gt;错误按钮&lt;/button&gt;
    &lt;/div&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="禁用状态按钮">禁用状态按钮</h2>
                            <a href="#禁用状态按钮">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <a href="javascript:;" class="btn btn-primary" disabled="disabled">Link按钮</a>
                                <button type="button" class="btn btn-primary" disabled="disabled">块级按钮</button>
                                <button type="button" class="btn btn-primary btn-ghost" disabled="disabled">块级按钮</button>
                                <button type="button" class="btn btn-defaylt disabled">块级按钮</button>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;a href="javascript:;" class="btn btn-primary" disabled="disabled"&gt;Link按钮&lt;/a&gt;
    &lt;button type="button" class="btn btn-primary" disabled="disabled"&gt;块级按钮&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary btn-ghost" disabled="disabled"&gt;块级按钮&lt;/button&gt;
    &lt;button type="button" class="btn btn-defaylt disabled"&gt;块级按钮&lt;/button&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="图标状态按钮">图标状态按钮</h2>
                            <a href="#图标状态按钮">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <button type="button" class="btn btn-defaylt btn-primary">
                                    <i class="glyphicon glyphicon-ok"></i>
                                    <span>块级按钮</span>
                                </button>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;button type="button" class="btn btn-defaylt btn-primary"&gt;
        &lt;i class="glyphicon glyphicon-ok"&gt;&lt;/i&gt;
        &lt;span&gt;块级按钮&lt;/span&gt;
    &lt;/button&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="尺寸按钮">尺寸按钮</h2>
                            <a href="#尺寸按钮">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <button type="button" class="btn btn-primary btn-lg">大按钮</button>
                                <button type="button" class="btn btn-primary">默认尺寸</button>
                                <button type="button" class="btn btn-primary btn-sm">小按钮</button>
                                <button type="button" class="btn btn-primary btn-xs">超小按钮</button>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;button type="button" class="btn btn-primary btn-lg"&gt;大按钮&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary"&gt;默认尺寸&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary btn-sm"&gt;小按钮&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary btn-xs"&gt;超小按钮&lt;/button&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="块级按钮">块级按钮</h2>
                            <a href="#块级按钮">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <button type="button" class="btn btn-primary btn-block">块级按钮</button>
                                <button type="button" class="btn btn-defaylt btn-block">块级按钮</button>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;button type="button" class="btn btn-primary btn-block"&gt;块级按钮&lt;/button&gt;
    &lt;button type="button" class="btn btn-defaylt btn-block"&gt;块级按钮&lt;/button&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>
</div>
<% include ../include/docs-footer %>
</body>
</html>